function Board(){
	this.width = 320;
	this.height = 500;
	this.canvas = document.getElementById('canva');
	this.ctx = this.canvas.getContext('2d');
	this.clouds = [];
	this.platforms = [];
	this.timeout;

	this.canvas.width = this.width;
	this.canvas.height = this.height;

	this.clear = function(){
		// some blue color to fill whole area
		this.ctx.fillStyle = '#d0e7f9';
		this.ctx.beginPath();
		this.ctx.rect(0, 0, this.width, this.height);
		this.ctx.closePath();
		this.ctx.fill();
	};

	this.initializeClouds = function (numberOfClouds){
		for (var i = 0; i < numberOfClouds; i++){
			var cloud = new Cloud(Math.random() * this.width, Math.random() * this.height, Math.random() * 100, Math.random() / 2);
			this.clouds.push(cloud);
			}
	};	
	this.drawClouds = function(){
		for (var i = 0; i < this.clouds.length; i++) {
			this.clouds[i].draw(this.ctx);
		}
	};
	this.moveClouds = function(speed){
		for (var i = 0; i < this.clouds.length; i++) {
		    if (this.clouds[i].y - this.clouds[i].radius > this.height) {
		    	var r = Math.random() * 100;
		    	this.clouds[i]= new Cloud(Math.random() * this.width, 0-r, r, Math.random() / 2);
		    } else {
		    	this.clouds[i].y += speed;
		    }
		  }
	};
	this.drawPlayer = function(player){
		player.draw(this.ctx);
	};
	
	this.checkCollision = function(player, jumpSpeed){
		if (player.y > this.height - player.height){
			player.speed = jumpSpeed;
		}
		this.platforms.forEach(function(platform){
			platform.checkCollisionWithPlayer(player);
		});
	};
	
	this.initializePlatforms = function(platformNumber){
		var type=0;
		for (var i = 0; i < platformNumber; i++) {
			type = Math.random() < 0.2 ? 1 : 0;
			var platform = new Platform(Math.random()* (this.width), i*this.height/platformNumber, type);
			this.platforms.push(platform);
		}
	};
	this.drawPlatforms = function(){
		for (var i = 0; i < this.platforms.length; i++) {
			this.platforms[i].draw(this.ctx);
		}
	};
}


function Cloud(x,y,radius,transparency){
	this.x=x;
	this.y=y;
	this.radius=radius;
	this.transparency=transparency;//from 0-0.5 (0 is invisible, 1 no transparency)
	this.draw = function(ctx){
		ctx.fillStyle = 'rgba(255, 255, 255, ' + this.transparency + ')';
	    //white color with transparency in rgba
	    ctx.beginPath();
	    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
	    //arc(x, y, radius, startAngle, endAngle, anticlockwise)
	    ctx.closePath();
	    ctx.fill();
	};
}


